import { Input, Button, Modal } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';
import { UserOutlined } from '@ant-design/icons';

export type TingoDemoProps = {
  name?: string;
  age: React.ReactNode | (() => React.ReactNode) | any;
  direction?:
    | 'bottomLeft'
    | 'bottomRight'
    | 'topLeft'
    | 'topCenter'
    | 'topRight'
    | 'bottomCenter'
    | string;
};

const TingoDemo: React.FC<TingoDemoProps> = ({ name, age, direction }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
      <div className={styles.container}>
        <h1>
          测试组件：name:{name},age={age},方向：{direction}
        </h1>
        <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
        <Button type="primary" onClick={showModal}>
          Primary Button
        </Button>
      </div>
    </>
  );
};

export default TingoDemo;
